<template>
  <div class="dataInTime">
    <div v-for="(item,index) in inTimeInfo" :key="index" class="dataInTime-item">
      <div class="dataInTime-item-data">{{ item.data }}</div>
      <div class="dataInTime-item-title">{{item.title}}({{ item.unit }})</div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from "vue";
const inTimeInfo = reactive([
  {
    data: "995",
    title: "今日入院",
    unit: "人",
  },
  {
    data: "995",
    title: "今日入院",
    unit: "人",
  },
  {
    data: "995",
    title: "今日入院",
    unit: "人",
  },
  {
    data: "995",
    title: "今日入院",
    unit: "人",
  },
  {
    data: "995",
    title: "今日入院",
    unit: "人",
  },
]);
</script>
<style lang="scss">
.dataInTime {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  &-item {
    display: flex;
    padding: 28px 0;
    margin-bottom: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 23%;
    background-color: #f2f9ff;
    border-radius: 4px;
    &-data {
      font-size: 32px;
      color: #555555;
      font-weight: bold;
      margin-bottom: 18px;
    }
    &-title {
      color: #999;
      font-size: 14px;
    }
  }
}
</style>
